基于接口文档以及gpt自动mock数据

背景

之前部门已经搭建了接口文档，php根据portal简单编写代码，即可自动生成接口文档。

js再通过yapi-to-typescript可生成请求函数以及ts类型。

但是每次都要自己手写mock数据，影响开发效率，于是决定将openai融入接口文档脚本中，自动根据接口类型生成mock数据。

使用

安装

先把生成ts及mock的包装上

pnpm i @uedc/yapi-to-typescript

注意，这里换了包名了，已经基于原包yapi-to-typescript进行了二次开发，支持mock数据。

在package.json中添加命令

"ytt": "ytt"

配置

在项目根目录编写ytt.config.ts配置

import { defineConfig } from '@uedc/yapi-to-typescript';

export default defineConfig([
  {
    serverUrl: 'http://200.200.190.55:40001',
    typesOnly: false,
    target: 'typescript',
    reactHooks: {
      enabled: false,
    },
    prodEnvName: 'production',
    // -----TODO 填写个人的信锐ai的token-----
    openaiKey: '',
    // 输出文件路径前缀，每个项目配好就不用动了
    outputFilePathPrefix: 'src/apis',
    // 输出 Mock 文件路径前缀，每个项目配好就不用动了
    outputMockFilePathPrefix: 'mock/api',
    // 结果类型文件路径，使用根目录的绝对路径，
    resultTypeWrapperPath: '@/utils/axios/types',
    requestFunctionFilePath: 'src/apis/request.ts',
    dataKey: 'data',
    // -----TODO 每次调用需修改为自己业务的路径，类型文件和mock文件都会用自己的前缀+这个路径组成输出路径-----
    outputFilePathPostfix: 'test/index.ts',
    projects: [
      {
        // -----TODO 每次调用需修改为自己业务的token-----
        token: 'ddbf2175c522d45f2c85407d84e240a6639ca800a5c089dfffd30912588da6c9',
        categories: [
          {
            // -----TODO 每次调用需修改为自己业务的分类id-----
            id: 67,
            getRequestFunctionName(interfaceInfo, changeCase) {
              // 以接口全路径生成请求函数名
              return changeCase.camelCase(interfaceInfo.path);

              // 若生成的请求函数名存在语法关键词报错、或想通过某个关键词触发 IDE 自动引入提示，可考虑加前缀，如:
              // return changeCase.camelCase(`api_${interfaceInfo.path}`)

              // 若生成的请求函数名有重复报错，可考虑将接口请求方式纳入生成条件，如:
              // return changeCase.camelCase(`${interfaceInfo.method}_${interfaceInfo.path}`)
            },
          },
        ],
      },
    ],
  },
]);

这里主要是加了mock文件的生成路径，以及需填写个人的信锐ai的token。

生成

配置好项目id后，控制台npm run ytt即可

mock

介绍

只要配置了mock文件路径outputMockFilePathPrefix，就会进行mock。

注意，使用的是openai去生成mock，需要在配置中填写个人的信锐ai的token。

另外，ai生成存在不稳定性，如果不符合预期可再跑一遍。

差量更新

由于生成的不一定是想要的文案或者格式，存在用户手动修改mock数据的场景。

针对此场景，本插件支持差量更新，在保持原数据的基础上，根据最新的接口文档进行更新。

mock原理

其实使用openai进行mock的原理很简单

安装openai的包，然后编写propmt（需要反复编写以达到要求）

import OpenAI from 'openai'

const chatCompletion = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    temperature: 0,
    messages: [
      {
        role: 'user',
        content: `
          prompt描述

          以下是接口文档的返回类型定义：
          ${tsType}

          以下是之前mock的数据：
          ${oldMockData}
        `,
      },
    ],
  })

再将openai的回答写入指定的mock文件目录即可。

生成效果：

附带上了ts类型，方便调试。

import { Result } from '~/types';
import {
  IndexPhpEventEnvironmentalQualityGetRunstatDataEventApListResponse,
} from '../../apis/test/index';

export default [
    {
    url: '/index.php/event_environmental_quality/get_runstat_data/event_ap_list',
    method: 'post',
    response: (): Result<IndexPhpEventEnvironmentalQualityGetRunstatDataEventApListResponse> => {
      return {
        success: true,
        data: {
          device_list: {
            data: [
              {
                id: 1,
                ip: '192.168.1.1',
                dev_name: '设备名称',
                user_num: 1,
                normal_serv_cnt: 1,
                abnormal_serv_cnt: 1,
                serv_cnt: 1,
                rf_type: {
                  '1': '射频类型',
                },
              },
            ],
            total: 1,
          },
        },
      };
    },
  },
];

总结

通过openai自动生成mock数据，提升了编码效率，使开发人员可以更关注业务，细枝末节都通过自动化去解决。